<template>
	<view class="page">
		<view class="title">
			<view @click="textClickHandle(0)" :class="active===0?'active':'moral'">全部</view>
			<view class="split_line"></view>
			<view @click="textClickHandle(1)" :class="active===1?'active':'moral'">免责</view>
			<view class="split_line"></view>
			<view @click="textClickHandle(2)" :class="active===2?'active':'moral'">补签</view>
		</view>
		<view class="content"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0
			}
		},
		methods: {
			textClickHandle(index){
				this.active = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		width: 100vw;
		min-height: 93vh;
		background-color: $global_bg_color;
	}

	.title{
		height: 100rpx;
		line-height: 60rpx;
		width: 100%;
		margin-top: 1rpx;
		display: flex;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		.moral{
			width: 33%;
			text-align: center;
		};
		.active{
			width: 33%;
			text-align: center;
			color: $theme_color;
		}
		.split_line{
			width: 2rpx;
			background-color: #C0C0C0;
			margin: 10rpx 0;
		}
	};
	.content{
		color: #18BC37;
	}

</style>
